<template>
  <el-table-column class-name="order-table-col" class="w-full">
    <template #header>
      <div class="flex flex-row items-center w-full">
        <div class="w-300px text-center"> 产品信息 </div>
        <div class="flex-1 text-center"> 订单信息 </div>
        <div class="w-220px text-center"> 买家/收货人 </div>
        <div class="w-140px text-center"> 操作 </div>
      </div>
    </template>
    <template #default="scope">
      <el-table
        :border="true"
        :data="scope.row.items"
        :header-cell-style="headerStyle"
        :span-method="spanMethod"
        class="w-full"
      >
        <el-table-column width="300" prop="spuName">
          <template #header>
            <div class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]">
              <span class="mr-20px">交易单号：{{ scope.row.no }} </span>
              <span>订单类型：</span>
              <dict-tag
                :type="DICT_TYPE.TRADE_ORDER_TYPE"
                :value="scope.row.type"
                class="mr-20px"
              />
              <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
              <span v-if="scope.row.payTime" class="mr-20px">
                支付时间：{{ formatDate(scope.row.payTime) }}
              </span>
              <span>来源终端：</span>
              <dict-tag :type="DICT_TYPE.TERMINAL" :value="scope.row.terminal" />
            </div>
          </template>
          <template #default="{ row }">
            <div class="flex flex-col items-start">
              <div class="flex flex-row">
                <el-image
                  :src="row.picUrl"
                  class="!h-[45px] !w-[45px]"
                  fit="contain"
                  :preview-src-list="[row.picUrl || '/placeholder.png']"
                  :initial-index="0"
                  :preview-teleported="true"
                  :hide-on-click-modal="true"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-image src="./placeholder.png" />
                    </div>
                  </template>
                </el-image>
                <div class="flex flex-col items-start ml-10px">
                  <el-tooltip :content="row.spuName" placement="top">
                    <span class="overflow-ellipsis max-h-[45px] overflow-hidden">
                      {{ row.spuName }}
                    </span>
                  </el-tooltip>
                  <div class="flex flex-wrap">
                    <el-tag
                      v-for="property in row.properties"
                      :key="property.propertyId"
                      class="mb-[10px] mr-[10px]"
                    >
                      {{ property.propertyName }}: {{ property.valueName }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']">{{
                scope.row.shop?.name || '店铺不详'
              }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" min-width="120">
          <template #default="{ row }">
            <div>
              <span>单价：{{ floatToFixed2(row.price) }} 元</span><br />
              <span>数量：{{ row.count }}</span
              ><br />
              <dict-tag
                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
                :value="row.afterSaleStatus"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120">
          <template #default>
            <div class="flex flex-col">
              <div>
                <!-- <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" /> -->
                <el-tag type="warning">{{ scope.row.statusName }}</el-tag>
              </div>
              <div v-if="scope.row.type == 3">
                <el-tag v-if="scope.row.combinationStatus == 0" type="warning">拼团进行中</el-tag>
                <el-tag v-else-if="scope.row.combinationStatus == 1" type="success"
                  >拼团成功</el-tag
                >
                <el-tag v-else-if="scope.row.combinationStatus == 2" type="danger">拼团失败</el-tag>
                <el-tag v-else type="info">未知拼团状态</el-tag>
              </div>
              <div
                ><span>{{ scope.row.payStatus ? '实付' : '应付' }}</span
                ><span class="text-orange-500 mx-2px">{{ floatToFixed2(scope.row.payPrice) }}</span
                ><span>元</span></div
              >
              <dict-tag
                v-if="scope.row.payStatus"
                :type="DICT_TYPE.PAY_CHANNEL_CODE"
                :value="scope.row.payChannelCode"
              />
              <dict-tag
                v-if="scope.row.refundStatus !== 0"
                :type="DICT_TYPE.TRADE_ORDER_REFUND_STATUS"
                :value="scope.row.refundStatus"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column width="250">
          <template #default>
            <dict-tag
              v-if="scope.row.deliveryType !== DeliveryTypeEnum.NONE.type"
              :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
              :value="scope.row.deliveryType"
            />
            <!-- 用户自提  -->
            <div
              v-if="scope.row.deliveryType === DeliveryTypeEnum.PICK_UP.type"
              class="flex flex-col"
            >
              <span>
                门店名称：
                {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
              </span>
              <span>
                门店手机：
                {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
              </span>
              <span>
                自提门店:
                {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress }}
              </span>
            </div>
            <!-- 快递发货/同城配送/现场核销  -->
            <div v-else class="flex flex-col">
              <span>买家：{{ scope.row.user?.nickname }}</span>
              <span v-if="scope.row.receiverName">
                联系人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
              </span>
              <span v-if="scope.row.receiverDetailAddress">
                地址：
                {{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
              </span>
              <span v-if="scope.row.verifyCode"> 核销码：{{ scope.row.verifyCode }} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" width="140">
          <template #default>
            <slot :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { DeliveryTypeEnum } from '@/utils/constants'
import { formatDate } from '@/utils/formatTime'
import { floatToFixed2 } from '@/utils'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { OrderVO } from '@/api/mall/trade/order'
import type { TableColumnCtx } from 'element-plus'
import type { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'

defineOptions({ name: 'OrderTableColumn' })

const props = defineProps<{
  list: OrderVO[]
  pickUpStoreList: DeliveryPickUpStoreVO[]
}>()

const headerStyle = ({ row, columnIndex }: any) => {
  // 共 5 列，表头第一行第一列占 5 列
  if (columnIndex === 0) {
    row[columnIndex].colSpan = 5
  } else {
    // 其余的不要
    row[columnIndex].colSpan = 0
    return {
      display: 'none'
    }
  }
}

interface SpanMethodProps {
  row: TradeOrderApi.OrderItemRespVO
  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
  rowIndex: number
  columnIndex: number
}

type spanMethodResp = number[] | { rowspan: number; colspan: number } | undefined
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethodResp => {
  const len = props.list.find(
    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
  )?.items?.length
  // 要合并的列，从零开始
  const colIndex = [2, 3, 4, 5]
  if (colIndex.includes(columnIndex)) {
    // 除了第一行其余的不要
    if (rowIndex !== 0) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
    // 动态合并行
    return {
      rowspan: len!,
      colspan: 1
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.order-table-col > .cell) {
  padding: 0;
}
</style>
